<template>
	<view class="container">

		<!--头部滚动条-->
		<scroll-view class="nav-scroll" scroll-x="true" style="white-space: nowrap;padding-top: 15rpx;">
			<view v-for="(item, index) in navList" :key="index" @tap="switchTab(index)"
				:class="[currentIndex==index?'active':'nav-item']">
				{{ item.text }}
			</view>
		</scroll-view>
		<!--列表-->
		<view v-for="(item, index) in orderList" class="orderListBg" :style="index>0?'margin-top: 100rpx;':''">
			<view>
				<view class="xdsj">下单时间：<text class="itemTime">{{item.time}}</text><text
						class="itemState">{{item.state==1?'待服务':''}}</text></view>

			</view>
			<view class="itemCenter">

				<image class="itemImg" :src="item.img"></image>
				<view>
					<view class="itemOneText">{{item.type}}</view>
					<view class="itemTwoText">已选：<text class="itemName">{{item.name}}达人</text></view>
					<view class="itemThreeText"><text class="moneyIcon">¥</text>{{item.wages}}<text
							class="itemOrderTime">共{{item.orderTime}}时</text></view>
				</view>
			</view>
			<!--底部按钮-->
			<view class="bottomClass">
				<!-- <view class="bottonItemClass"></view> -->
				<view class="bottonItemClass">修改地址</view>
				<view class="bottonItemClass">申请退款</view>
				<view class="bottonItemClass" style="border-radius: 4px;
border: 1px solid #FF9E44;color: #FF9E44;" @click="goService">立即服务</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList: [{
						text: '全部'
					},
					{
						text: '待服务'
					},
					{
						text: '已服务'
					},
					{
						text: '已评价'
					},
					{
						text: '未评价'
					}
				],
				currentIndex: 0,
				orderList: [{
						img: '../../../../static/icon/img_girl.png',
						time: '2024-06-01',
						state: 1,
						type: '锻炼达人',
						name: '小雨',
						orderTime: '2',
						wages: '150'
					},
					{
						img: '../../../../static/icon/img_girl.png',
						time: '2024-06-01',
						state: 1,
						type: '锻炼达人',
						name: '小雨',
						orderTime: '2',
						wages: '150'
					},
					{
						img: '../../../../static/icon/img_girl.png',
						time: '2024-06-01',
						state: 1,
						type: '锻炼达人',
						name: '小雨',
						orderTime: '2',
						wages: '150'
					},
					{
						img: '../../../../static/icon/img_girl.png',
						time: '2024-06-01',
						state: 1,
						type: '锻炼达人',
						name: '小雨',
						orderTime: '2',
						wages: '150'
					},
					{
						img: '../../../../static/icon/img_girl.png',
						time: '2024-06-01',
						state: 1,
						type: '锻炼达人',
						name: '小雨',
						orderTime: '2',
						wages: '150'
					},
					{
						img: '../../../../static/icon/img_girl.png',
						time: '2024-06-01',
						state: 1,
						type: '锻炼达人',
						name: '小雨',
						orderTime: '2',
						wages: '150'
					}

				]
			}
		},
		methods: {
			switchTab(index) {
				// 根据点击的索引进行相应的逻辑处理，例如切换标签页等
				this.currentIndex = index
				console.log('Switch to tab:', index);
			},
			goService(){
				uni.navigateTo({
					url:'/pages/module/order/orderDetail/orderDetail'
				})
			}
		}
	}
</script>

<style>
	.container {
		background-color: #FFFDFC;
		

	}


	.nav-item {
		display: inline-block;
		color: #929397;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		padding: 10px;
		margin-right: 10px;
		text-align: center;
		line-height: 20px;
		cursor: pointer;
	}

	.nav-item:last-child {
		margin-right: 0;
	}

	.active {
		display: inline-block;
		color: #FF9E44;
		text-align: center;
		/* Pingfang SC/Headline/Medium */
		font-family: "PingFang SC";
		font-size: 14px;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		padding: 10px;
		margin-right: 10px;
		text-align: center;
		line-height: 20px;
		cursor: pointer;
	}

	.orderListBg {
		border-radius: 2px;
		background: #FFF;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;
		
	}

	.xdsj {
		color: #929397;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.itemTime {
		color: #040B29;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.itemState {
		color: #FF9E44;
		text-align: right;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		position: absolute;
		right: 50rpx;
	}

	.itemImg {
		width: 85px;
		height: 85px;
		flex-shrink: 0;
	}

	.itemCenter {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
	}

	.itemOneText {
		margin-left: 20px;
		color: #040B29;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 14px;
		font-weight: 700;
		line-height: 33px;
	}

	.itemTwoText {
		margin-left: 20px;
		color: #929397;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-weight: 400;
		line-height: 33px;
	}

	.itemThreeText {
		margin-left: 20px;
		color: #FEA442;
		font-family: DIN;
		font-size: 18px;
		font-weight: 700;
		line-height: 33px;
	}

	.moneyIcon {
		color: #FEA442;
		font-family: DIN;
		font-size: 12px;
		font-weight: 700;
	}

	.itemName {
		color: #040B29;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-weight: 600;
	}

	.itemOrderTime {
		color: #929397;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-weight: 400;
		position: absolute;
		right: 50rpx;
		line-height: 33px;
	}

	.bottomClass {
		flex-wrap: wrap;
		column-count: 3;
		text-align: center;
		padding: 20rpx;
		position: absolute;
		right: 0rpx;
	}

	.bottonItemClass {
		text-align: center;
		color: #040B29;
		font-family: "PingFang SC";
		font-size: 14px;
		font-weight: 400;
		padding: 10rpx;
	}
</style>